<template>
<van-nav-bar
    title="兑换记录"
    left-arrow
    @click-left="gotoleft"
  />
<div class="exchangeRecord-container">
  
  <van-image class="bg" :src="bg"></van-image>

  <div class="points">
    <text>已兑积分：</text>
    <text>{{total}}</text>
  </div>
  <div class="record-list">
    <div class="record-item" v-for="item in recordList" :key="item.time">
      <div class="top">
        <text class="name">{{item.goodsName}}</text>
        <text class="point">-{{item.orderPrice}}</text>
      </div>
      <div class="date">{{item.addTime}}</div>
    </div>
  </div>
</div>
</template>

<script>
import router from '../router'
import bg from '../assets/images/bg.png'
import {
  PhysicalRecord
} from '@/api'
import {reactive,toRefs} from 'vue'
export default {
  name: 'exchangeRecord',
  setup(props) {
    //参数
    const code = 0
    let mine = reactive({
      recordList:[],
      total:0,
      bg:bg
    })
    PhysicalRecord().then(res => {
      console.log('exchange record==>', res)
     if(res.code==0){
      mine.recordList = res.data
      let total = 0;
      res.data.forEach(item => {
        total += item.orderPrice
      })
      mine.total=total
     }
    })
    function gotoleft(){
      router.go(-1)
    }
    //挂载
    return{ ...toRefs(mine),gotoleft}
  }
}
</script>

<style scoped>

.exchangeRecord-container{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width:100%;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  overflow: hidden;
}

.bg{
  position: absolute;
  top:0;
  left:0;
  display: block;
  width:100%;
  z-index: -1;
  /* height: 480px; */
}

.points{
  text-align: center;
  color:#ffffff;
}

.points text:nth-child(2){
  font-size: 70px;
}

.record-list{
  flex:1;
  width:80%;
  margin-top: 20px;
  padding:30px;
  border-radius: 30px;
  background-color: #ffffff;
  overflow-y: scroll;
  /* height: 100vw; */
}

.record-list .record-item{
  padding-bottom: 20px;
  border-bottom:1px solid#e6e6e6;
}

.record-list .record-item:not(:first-of-type){
  margin-top: 20px;
}

.record-list .record-item:last-of-type{
  border:none;
}

.record-item .top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-item .point{
  color:red;
}

.record-item .date{
  margin-top: 5px;
  font-size: 28px;
  color:#9c9c9c;
}
</style>